<template>
  <div class="containers">
    <div class="canvas" ref="canvas"></div>
    <ul class="buttons">
      <Button @click="handleZoom(0.2)">放大</Button>
      <Button @click="handleZoom(-0.2)">缩小</Button>
    </ul>
  </div>
</template>

<script>
// import BpmnViewer from 'bpmn-js/lib/Viewer'
import { CustomViewer } from "../customBpmn";
export default {
  name: 'bpmnViewer',
  props: {
    sysInfo: {
      type: Object,
    },
    taskStatus: {
      type: Object,
      default:{
        his:[],modelXml:''
      }
    }
  },
  watch: {
    taskStatus: {
      handler (newValue, oldValue) {
        this.init()
      }
    }
  },
  mounted () {
    this.init()
  },
  data () {
    return {
      scale: 1,
      bpmnViewer: null,
      container: null,
      canvas: null
    }
  },
  methods: {
    init () {
      this.bpmnViewer && this.bpmnViewer.destroy()
      this.$refs.canvas.innerHTML = ''
      this.scale = 1 // 放大缩小比例
      const canvas = this.$refs.canvas
      this.bpmnViewer = new CustomViewer({
        container: canvas
      })

      this.createNewDiagram()
    },
    async createNewDiagram () {
      try {
        if (this.taskStatus.modelXml.length ===0){
          return
        }
        const result = await this.bpmnViewer.importXML(this.taskStatus.modelXml)
        const { warnings } = result
        // console.log(warnings)
        let canvas = this.bpmnViewer.get('canvas')
        this.fitView(canvas)
        if(this.taskStatus.his){
          const his = Object.values(this.taskStatus.his).map(item => item.activityId)
          this.setNodeColor(canvas, his)
        }
      } catch (err) {
        console.log(err.message, err.warnings)
      }
    },
    handleZoom (flag) {
      // 放大缩小倍数flag可以自行设置
      if (flag < 0 && this.scale <= 1) {
        return
      }
      this.scale += flag
      this.$nextTick(() => {
        this.bpmnViewer.get('canvas').zoom(this.scale)
      })
    },
    fitView (canvas) {
      canvas.zoom('fit-viewport', 'auto')
      // 删除 bpmn logo  bpmn.io官方要求不给删或者隐藏，否则侵权   内部使用
      const bjsIoLogo = document.querySelector('.bjs-powered-by')
      while (bjsIoLogo.firstChild) {
        bjsIoLogo.removeChild(bjsIoLogo.firstChild)
      }
    },
    setNodeColor (canvas, history) {
      const allShapes = this.bpmnViewer.get('elementRegistry').getAll()
      history.forEach(item => {
        canvas.addMarker(item, 'highlight')
      })
      //最后一个元素
      let {[history.length - 1] : last} = history;
      canvas.addMarker(last, 'highlight-2')

      allShapes.forEach(element => {
        const shapeId = element.businessObject.id
        // console.log(element)
        if (element.businessObject.$type !== 'bpmn:Group') {
          if (element.businessObject.$type === 'bpmn:SequenceFlow'
            && history.indexOf(element.businessObject.sourceRef.id) > -1
            && history.indexOf(element.businessObject.targetRef.id) > -1) {
            // console.log(element.businessObject.sourceRef.id + '====' + element.businessObject.targetRef.id)
            canvas.addMarker(shapeId, "highlight-23");
          }
        }
      })
    }
  }
}
</script>

<style>
.containers {
  width: 100%;
  height: calc(90vh - 182px);
}

.canvas {
  width: 100%;
  height: 100%;
}

.buttons {
  position: absolute;
  left: 300px;
  bottom: 20px;
}

.buttons li {
  display: inline-block;
  margin: 5px;
}

.buttons li a {
  color: #333;
  background: #fff;
  cursor: pointer;
  padding: 8px;
  border: 1px solid #ccc;
  text-decoration: none;
}

.highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
  stroke: green !important;
  fill: rgba(0, 80, 0, 0.4) !important;
}

.highlight-2:not(.djs-connection) .djs-visual > :nth-child(1) {
  stroke: #5cadff !important;
  fill: #ff9900 !important;
}

/* 连线 */
.highlight-20 .djs-visual > :nth-child(1) {
  stroke: black !important;
}

.highlight-23 .djs-visual > :nth-child(1) {
  stroke: green !important;
}

.highlight-24 .djs-visual > :nth-child(1) {
  stroke: red !important;
}

</style>
